<template>
    <el-container>
        <el-header class="postPageHeader">
            <el-page-header @back="goBack" content="更新页面">
            </el-page-header>
        </el-header>
        <div class="post-view">
            <el-form ref="form" :model="article" :rules="rules" label-width="80px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="article.title"></el-input>
                </el-form-item>
                <el-form-item label="分类" prop="category">
                    <el-input v-model="this.modules[article.module].moduleName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-input type="textarea" v-model="article.content"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">修改</el-button>
                    <el-button type="danger" @click="deleteForm">删除</el-button>
                </el-form-item>
            </el-form>
        </div>

    </el-container>
</template>
  
<script>
export default {
    data() {
        return {
            article: [],

            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
                category: [
                    { required: true, message: '请选择分类', trigger: 'change' },
                ],
                content: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                ],
            },
        };
    },
    mounted() {
        this.$axios.get('https://localhost:44300/api/Post/IDSelect', {
            params: {
                id: this.postId
            }
        })
            .then(response => {
                this.article = response.data.response[0];
            })
            .catch(error => {
                console.error(error);
            });

    }, async created() {
        this.postId = this.$route.params.postId,
            this.userId = this.$route.params.userId,
            this.userName = this.$route.params.userName

        await this.$axios.get('https://localhost:44300/api/Module/getAll')
            .then(response => {
                const modules = response.data.response;
                this.modules = {};
                modules.forEach(module => {
                    this.modules[module.moduleId] = module;
                });
                console.log(this.modules[2]);
                this.$forceUpdate();
            })
            .catch(error => {
                console.error(error);
            });
    },
    methods: {
        goBack() {
            this.$router.push({ name: 'userInformation', params: { userId: this.userId, userName: this.userName } });
        },
        // 提交表单
        submitForm() {
            this.$axios.get('https://localhost:44300/api/Post/UpdateArticle', {
                params: {
                    postId: this.postId,
                    title: this.article.title,
                    content: this.article.content
                }
            })
                .then(response => {
                    if (response.data.success === true) {
                        console.log(this.userId);
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                })
                .catch(error => {
                    console.error(error);
                });
        },
        // 重置表单
        deleteForm() {
            this.$axios.get('https://localhost:44300/api/Post/DeleteArticle', {
                params: {
                    id: this.postId
                }
            })
                .then(response => {
                    if (response.data.success === true) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.$router.push({ name: 'userInformation', params: { userId: this.userId, userName: this.userName } });
                    }
                })
                .catch(error => {
                    console.error(error);
                });
        },
    },
};
</script>
  
<style>
.post-view {
    width: 65%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f7f7f7;
    border-radius: 5px;
    box-shadow: 0 0 10px #aaa;
    margin-bottom: 20px;
}
</style>